<template>
	<view class="documentList_page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<div v-for="(item, index) in cardDocumentList" :key="index">
			<div class="documentList_card" v-if="item.documentList.length">
				<div class="document_title">
					<u-icon name="tags-fill" color="#ffd700" size="26px"></u-icon>
					<div class="text">{{item.className}}</div>
				</div>
				
				<div class="document_list" v-for="(ee,ii) in item.documentList" :key="ii">
					<u-icon color="#3c9cff" size="26px" name="file-text"></u-icon>
					<div style="margin-left:10px;">{{ee.dataName}}</div>
					<div class="down_style">
						<u-icon color="#3c9cff" size="26px" name="download" @click="downImg(ee)"></u-icon>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		getCardDocumentListAPI,
		setCardDocLogAPI
	} from '@/config/api.js';
	import {
		downloadFun
	} from '@/plugins/utils.js';
	const log = require('@/plugins/log.js')
	export default {
		name: 'documentList',
		data() {
			return {
				cardDocumentList: [],
				sourceFrom:'',
			}
		},
		async onLoad(options) {
			await this.$onLaunched;
			this.getCardDocumentList()
			this.sourceFrom=options.from;
		},
		async onShow() {

		},

		methods: {
			// 下载
			downImg(item) {
				let text='';
				if(this.sourceFrom=='card'){
					text='企业文档&'+item.dataName;
					log.info(text);
				}
				if(item.dataFiles){
					this.setCardDocLog(item.dataId)
					downloadFun(item.dataFiles)
				}else{
					// #ifdef H5
					this.setCardDocLog(item.dataId)
					this.preview(item.dataFiles)
					// #endif
				}
			},
			// 存储文档点击记录
			setCardDocLog(dataId){
				setCardDocLogAPI({
					dataId:dataId
				}).then(( )=>{})
			},
			preview(url){
				uni.previewImage({urls: url});
			},
			// 获取企业文档列表
			getCardDocumentList() {
				getCardDocumentListAPI().then((res) => {
					this.cardDocumentList = res.list;
				})
			},
		},
	}
</script>

<style lang="scss">
	.documentList_page {
		width: 100%;
		background-color: #eee;
		padding: 20rpx;

		.documentList_card {
			width: 100%;
			background-color: #fff;
			margin-bottom: 10px;
			padding: 0 10px 20px;
			box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.06);
			border-radius: 16rpx;

			.document_title {
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eee;
				text-align: left;
				padding: 10rpx;
				font-size: 28rpx;
				color: #333;

				.text {
					margin-left: 10rpx;
					font-size: 30rpx;
					color: #000000;
					font-weight: bold;

				}
			}

			.document_list {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				text-align: left;
				padding: 10rpx;
				border-bottom: 1px solid #eee;
				font-size: 28rpx;
				position: relative;

				.down_style {
					position: absolute;
					right: 10px;
				}
			}
		}
	}
</style>